<template>
    <div>
        <!--  头查询  -->
        <el-row :gutter="4">
            <el-col :span="4">
                <el-input v-model.trim="keyword.userName" prefix-icon="fa fa-search" placeholder="用户名"
                          v-permission="'system:user:list'"
                          @keyup.enter.native="initUser"></el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-search" @click="initUser"
                           v-permission="'system:user:list'"> 搜 索
                </el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="fa fa-plus" @click="addUser"
                           v-permission="'system:user:add'"> 添 加 信 息
                </el-button>
            </el-col>
            <el-col :span="1" style="margin-left: 3px;">
                <el-button type="warning" icon="fa fa-refresh"
                           v-permission="'system:user:list'"
                           @click="initUser">
                </el-button>
            </el-col>
        </el-row>
        <!--   展示用户     -->
        <div class="user_box_card">
            <!--  一行 6个 -->
            <el-row :gutter="20">
                <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6" v-for="item in page.row" :key="item.id">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="font-size:14px;"> <strong style="margin-right: 10px;">用 户 名:</strong>{{item.userName}}</span>
                            <el-progress type="circle" :percentage="100"
                                         :status="item.status === '0' ? 'success' : 'exception' " :width="26"
                                         :stroke-width="1"></el-progress>
                        </div>
                        <div class="box_bottom">
                            <div class="box_content">
                                <el-descriptions :column="1" size="small" border>
                                    <template slot="extra">
                                        <el-button type="warning" size="mini" round @click="initUserPassword(item.id)"
                                                   v-permission="'system:user:update'">重 置 密 码
                                        </el-button>
                                        <el-button type="primary" size="mini" icon="el-icon-edit" circle
                                                   v-permission="'system:user:update'"
                                                   @click="handleEdit(item)"></el-button>
                                        <el-popconfirm
                                                style="margin-left: 10px"
                                                title="确认删除该用户吗？">
                                            <el-button type="danger" size="mini" icon="el-icon-delete" slot="reference"
                                                       circle @click="handleDelete"
                                                       v-permission="'system:user:delete'"></el-button>
                                        </el-popconfirm>
                                    </template>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="el-icon-picture" aria-hidden="true"></i>
                                            头 像
                                        </template>
                                        <div style="display: flex;justify-content: center">
                                            <el-avatar :size="40" :src="`${baseURL}${fileViewPath}${item.avatar}`"
                                                       :fit="'fill'"
                                                       :alt="item.userName"
                                                       :title="item.userName"></el-avatar>
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="el-icon-user"></i>
                                            昵 称
                                        </template>
                                        <div style="display: flex;justify-content: center">
                                            {{ item.nickName }}
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="el-icon-user"></i>
                                            性 别
                                        </template>
                                        <div style="display: flex;justify-content: center">
                                            <i :class=" item.gender === '1' ? 'fa fa-male' : 'fa fa-female'"
                                               aria-hidden="true" style="font-size: 16px"></i>
                                        </div>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="el-icon-mobile-phone"></i>
                                            手 机 号
                                        </template>
                                        {{ item.phoneNumber}}
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="fa fa-users" aria-hidden="true"></i>
                                            角 色
                                        </template>
                                        <span
                                                v-for="role in item.children" :key="role.id"
                                                style="margin-right: 5px;">
								                <el-tag type="success">{{role.name}}</el-tag>
							            </span>
                                        <el-popover
                                                placement="right-end"
                                                title="分 配 角 色"
                                                width="200"
                                                trigger="click"
                                                @show="showRole(item.children)"
                                                @hide="updateRole(item)"
                                        >
                                            <el-divider></el-divider>
                                            <el-checkbox-group v-model="checkRole">
                                                <el-checkbox :label="role.id" v-for="role in allRoles"
                                                             :key="role.id" @change="updateFlag">
                                                    <el-col>
                                                        <el-tag>{{role.name}}</el-tag>
                                                    </el-col>
                                                </el-checkbox>
                                            </el-checkbox-group>
                                            <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
                                        </el-popover>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="fa fa-envelope" aria-hidden="true"></i>
                                            邮 箱
                                        </template>
                                        {{ item.email }}
                                    </el-descriptions-item>
                                    <el-descriptions-item v-permission="'system:user:update'">
                                        <template slot="label">
                                            <i class="fa fa-circle" aria-hidden="true"></i>
                                            上线状态
                                        </template>
                                        <el-switch
                                                v-model="item.online"
                                                :active-value="true"
                                                :inactive-value="false"
                                                class="main-el-switch"
                                                :width="90"
                                                :disabled="item.online === false"
                                                active-color="#13ce66"
                                                active-text="已上线..."
                                                inactive-text="已下线..."
                                                @change="offline(item)"
                                        >
                                        </el-switch>
                                    </el-descriptions-item>
                                    <el-descriptions-item>
                                        <template slot="label">
                                            <i class="fa fa-circle" aria-hidden="true"></i>
                                            状态
                                        </template>
                                        <el-switch
                                                v-model="item.status"
                                                active-color="#ff4949"
                                                inactive-color="#13ce66"
                                                active-text="禁用"
                                                active-value="1"
                                                inactive-value="0"
                                                @change="changeStatus(item.id,item.status)"
                                                inactive-text="启用"
                                        >
                                        </el-switch>
                                    </el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </div>
                    </el-card>
                </el-col>
                <el-dialog
                        v-dialog-drag
                        :title="isAdd ? '新 增 数 据' : '修 改 数 据'"
                        :visible.sync="centerDialogVisible"
                        width="25%"
                        center
                        @close="resetField"
                >
                    <el-form ref="form" :rules="rules" :model="data" label-width="80px">
                        <el-form-item label="昵称:" label-width="80px" prop="nickName">
                            <el-input v-model="data.nickName" placeholder="请输入昵称"></el-input>
                        </el-form-item>
                    </el-form>

                    <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOrUpdateUser">确 定</el-button>
            </span>
                </el-dialog>
            </el-row>
        </div>
    </div>
</template>

<script>
    import {
        deleteUser,
        enableUser,
        page,
        updateUserRole,
        initUserPassword,
        offline,
        updateUser,
        addUser
    } from "../../../api/modules/system/user";
    import {getAllRoles} from "../../../api/modules/system/role";
    import cutStr from "../../../utils/cutStr";
    import {USER_IS_OFFLINE} from "../../../config/constant/message-Info"
    import {baseURL, fileViewPath} from '../../../config/constant'

    export default {
        name: 'SystemUser',

        data() {
            return {
                // 文件名和路径
                baseURL, fileViewPath,
                keyword: {
                    "email": "",
                    "gender": "",
                    "nickName": "",
                    "phoneNumber": "",
                    "userName": ""
                },
                data: {
                    "avatar": "",
                    "email": "",
                    "gender": "",
                    "id": 0,
                    "nickName": "",
                    "phoneNumber": "",
                    "userName": ""
                },
                isAdd: true,
                roleFlag: false,
                allRoles: [],
                checkRole: [],
                pagination: {
                    current: 1,
                    size: 9
                },
                page: {
                    row: [],
                    total: 0
                },
                multipleSelection: [],
                centerDialogVisible: false,
                rules: {
                    nickName: [{required: true, message: '请输入昵称', trigger: 'blur'}]
                }
            };
        },

        methods: {
            cutStr,
            initUser() {
                page(this.pagination, this.keyword).then(response => {
                    this.page.row = response.row;
                    this.page.total = response.total;
                })
            },
            initRole() {
                if (this.allRoles.length === 0) {
                    // 获取全部用户
                    getAllRoles().then(response => {
                        this.allRoles = response;
                    })
                }
            },
            // 重置用户密码
            initUserPassword(userId) {
                initUserPassword(userId);
            },
            // 增加或者修改
            addOrUpdateUser() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        // 是新增就进行添加
                        if (this.isAdd) {
                            addUser(this.data).then(() => {
                                // TODO 添加信息 不需要 init
                                this.centerDialogVisible = false;
                                this.initRole();
                            })
                        } else {
                            updateUser(this.data).then(() => {
                                // TODO 修改信息 不需要 init
                                this.centerDialogVisible = false;
                                this.initRole();
                            })
                        }
                    }
                })
            },
            // 强制下线用户
            offline(user) {
                if (!user.online) {
                    offline(user.id);
                } else {
                    this.$message.info({message: USER_IS_OFFLINE})
                }
            },
            // 修改的标志 ， 如果没有点击就不修改
            updateFlag() {
                this.roleFlag = true;
            },
            // 修改时展示的角色
            showRole(roles) {
                this.checkRole = [];
                for (let allRole of this.allRoles) {
                    for (let nowUserRole of roles) {
                        if (allRole.id === nowUserRole.id) {
                            this.checkRole.push(allRole.id);
                        }
                    }
                }
            },
            // 修改用户
            updateRole(item) {
                if (this.roleFlag) {
                    updateUserRole(item.id, this.checkRole).then(response => {
                        if (response) {
                            let nowRole = [];
                            for (let allRole of this.allRoles) {
                                for (let nowCheckRole of this.checkRole) {
                                    if (allRole.id === nowCheckRole) {
                                        nowRole.push(allRole);
                                    }
                                }
                            }
                            item.children = nowRole;
                        }
                    });
                    this.roleFlag = false;
                }
            },
            changeStatus(id, status) {
                // 是否启用
                enableUser(id, status);
            },
            // 当前页大小改变
            handleSizeChange(size) {
                this.pagination.size = size;
                this.initUser();
            },
            // 当前页改变
            handleCurrentChange(current) {
                this.pagination.current = current;
                this.initUser();
            },
            // 修改单个
            handleEdit(row) {
                // 不是添加
                this.isAdd = false;
                Object.assign(this.data, row);
                this.centerDialogVisible = true;
            },
            addUser() {
                // 是添加
                this.isAdd = true;
                Object.assign(this.data, {
                    "avatar": "",
                    "email": "",
                    "gender": "",
                    "id": 0,
                    "nickName": "",
                    "phoneNumber": "",
                    "userName": ""
                });
                this.centerDialogVisible = true;
            },
            // 删除单个
            handleDelete(row) {
                // 删除单个
                this.$confirm(`此操作将永久删除 <strong><i> ${row.name} </i></strong> 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    type: 'warning'
                }).then(() => {
                    deleteUser(row.id).then(() => {
                        // 刷新页面
                        this.initUser();
                    });
                });
            },
            // 多选框
            handleSelectionChange(row) {
                // 获取 ids
                this.multipleSelection = row.map(item => item.id);
            },
            resetField() {
                // 清空表单验证
                this.$refs.form.resetFields();
            }
        },
        mounted() {
            this.initUser();
            this.initRole();
        },

        computed: {},
        watch: {}
    }
</script>

<style lang="scss" scoped>
    .user_box_card {
        margin-top: 10px;

        .el-card {
            .el-progress {
                float: right;
            }

            .box_content {
                .el-avatar {

                }
            }
        }
    }
    /*  头像宽度设置 */
    ::v-deep .el-avatar > img {
        width: 100% !important;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    ::v-deep .clearPadding .vxe-cell {
        padding: 0;
    }

    ::v-deep .clearPaddingLeft .vxe-cell {
        padding-left: 0px;
    }

    ::v-deep {
        .main-el-switch {
            position: relative;

            .el-switch__core {
                height: 24px;
                border-radius: 12px;

                &:after {
                    left: 4px;
                    top: 3px;
                }
            }

            &.el-switch {
                &.is-checked {
                    .el-switch__core {
                        &:after {
                            margin-left: -20px;
                            left: 100%;
                        }
                    }
                }
            }

            &.is-checked {
                .el-switch__label--left {
                    opacity: 0;
                }

                .el-switch__label--right {
                    opacity: 1;
                }
            }

            .el-switch__label {
                position: absolute;
                top: 0;
            }

            .el-switch__label--left {
                right: 0;
                color: #999;
                z-index: 1;
                margin-right: 8px;
            }

            .el-switch__label--right {
                left: 0;
                color: #fff;
                opacity: 0;
                margin-left: 8px;
            }
        }
    }

</style>